@import "variable";

@each $font in $fontSizes {
  .fz-#{$font} {
    font-size: #{$font}px;
  }
}

@for $size from 0 through 16 {
  .line-#{$size} {
    height: #{$size}px;
    width: 100%;
    background: #f8f8f8;
  }
  @each $p in $positions {
    .border-#{$p}-#{$size} {
      @if ($p == "t") {
        border-top: #{$size}px solid $primaryBackgroundColor !important;
      }
      @if ($p == "b") {
        border-bottom: #{$size}px solid $primaryBackgroundColor !important;
      }
      @if ($p == "l") {
        border-left: #{$size}px solid $primaryBackgroundColor !important;
      }
      @if ($p == "r") {
        border-right: #{$size}px solid $primaryBackgroundColor !important;
      }

      @if ($p == "a") {
        border: #{$size}px solid $primaryBackgroundColor !important;
      }
    }
    .m#{$p}-#{$size} {
      @if ($p == "t") {
        margin-top: #{$size * $spacer}px !important;
      }
      @if ($p == "b") {
        margin-bottom: #{$size * $spacer}px !important;
      }
      @if ($p == "l") {
        margin-left: #{$size * $spacer}px !important;
      }
      @if ($p == "r") {
        margin-right: #{$size * $spacer}px !important;
      }
      @if ($p == "x") {
        margin-left: #{$size * $spacer}px;
        margin-right: #{$size * $spacer}px;
      }
      @if ($p == "y") {
        margin-top: #{$size * $spacer}px;
        margin-bottom: #{$size * $spacer}px;
      }
      @if ($p == "a") {
        margin-left: #{$size * $spacer}px;
        margin-right: #{$size * $spacer}px;
        margin-top: #{$size * $spacer}px;
        margin-bottom: #{$size * $spacer}px;
      }
    }
    .m#{$p}-n#{$size} {
      @if ($p == "t") {
        margin-top: -#{$size * $spacer}px !important;
      }
      @if ($p == "b") {
        margin-bottom: -#{$size * $spacer}px !important;
      }
      @if ($p == "l") {
        margin-left: -#{$size * $spacer}px !important;
      }
      @if ($p == "r") {
        margin-right: -#{$size * $spacer}px !important;
      }
      @if ($p == "x") {
        margin-left: -#{$size * $spacer}px;
        margin-right: -#{$size * $spacer}px;
      }
      @if ($p == "y") {
        margin-top: -#{$size * $spacer}px;
        margin-bottom: -#{$size * $spacer}px;
      }
      @if ($p == "a") {
        margin-left: -#{$size * $spacer}px;
        margin-right: -#{$size * $spacer}px;
        margin-top: -#{$size * $spacer}px;
        margin-bottom: -#{$size * $spacer}px;
      }
    }
    .p#{$p}-#{$size} {
      @if ($p == "t") {
        padding-top: #{$size * $spacer}px !important;
      }
      @if ($p == "b") {
        padding-bottom: #{$size * $spacer}px !important;
      }
      @if ($p == "l") {
        padding-left: #{$size * $spacer}px !important;
      }
      @if ($p == "r") {
        padding-right: #{$size * $spacer}px !important;
      }
      @if ($p == "x") {
        padding-left: #{$size * $spacer}px;
        padding-right: #{$size * $spacer}px;
      }
      @if ($p == "y") {
        padding-top: #{$size * $spacer}px;
        padding-bottom: #{$size * $spacer}px;
      }
      @if ($p == "a") {
        padding-left: #{$size * $spacer}px;
        padding-right: #{$size * $spacer}px;
        padding-top: #{$size * $spacer}px;
        padding-bottom: #{$size * $spacer}px;
      }
    }
  }
}
